<style scoped lang="less">
@media screen and (min-width: 829px) {
    .resultsInfo {
        background: rgba(246, 247, 251, 1);
        .resultsInfoWrap {
            max-width: 80%;
            margin: auto;
            /*min-height: 3.57rem;*/
            padding-bottom: 4.4rem;
        }
        .word {
            height: 4.86rem;
            background: rgba(248, 243, 235, 1);
            border-radius: 0.21rem;
            margin-top: 4.2rem;
            width: 100%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 4.86rem;
            font-size: 1.57rem;
            div:nth-child(1) {
                padding-left: 3rem;
                float: left;
                img {
                    vertical-align: middle;
                }
            }
            div:nth-child(2) {
                padding-right: 3rem;
                float: right;
            }
        }

        .fileWrap {
            background-color: white;
            /*padding-top: 3.14rem;*/
            min-height: 42.57rem;
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            position: relative;
            /*margin-bottom: 3rem;*/
            /*margin-bottom: 4.43rem;*/
            .file {
                width: 80%;
                position: absolute;
                /*top: 3.1rem;*/
                /*left: 9.2rem;*/
                margin-top: 3.1rem;
                margin-left: 10%;
                overflow: hidden;
            }
            .downloadWrap {
                /*position: absolute;*/
                /*margin-top: 3rem;*/
                height: 3rem;
                p {
                    /*float: left;*/
                    /*padding-top: 1rem;*/
                    /*padding-left: 10%;*/
                    position: absolute;
                    left: 9.2rem;
                    bottom: 2.5rem;
                    span {
                        color: #CE0000;
                    }
                }
                div {
                    position: absolute;
                    right: 9.2rem;
                    bottom: 1.5rem;
                    cursor: pointer;
                    /*float: right;*/
                    /*margin-right: 10%;*/
                    width: 8rem;
                    height: 2.86rem;
                    background-color: #F37D0A;
                    border-radius: 0.29rem;
                    color: white;
                    text-align: center;
                    line-height: 2.86rem;
                    span {
                        font-size: 1.36rem;
                    }
                }
            }
        }
      .num span:nth-child(1){
        display: none;
      }
      .num span:nth-child(2){
        font-size:1rem;
        
        color:rgba(153,153,153,1);
      }
        .time,
        .time-img {
            display: none
        }
        .downloadWrap-phone {
            display: none;
        }
    }
}

@media screen and (max-width: 829px) {
    .resultsInfo {
        * {
            box-sizing: border-box;
        }
        .word {
            padding: 0 0.3rem;
            padding-top: 0.6rem;
        }
        .title {
            font-size: 0.54rem;
            color: #1a1a1a;
            img {
                display: none
            }
        }
        .time-box {
            padding: 0.25rem 0;
            font-size: 0.22rem;
            color: #888;
          .time{
            padding-right: 0.2rem;
          }
            .time-img {
                width: 0.28rem;
                margin-top: 0.05rem;
                vertical-align: top;
            }
            .eye {
                display: none
            }
        }
        .downloadWrap {
            display: none;
        }
        .downloadWrap-phone {
            position: fixed;
            right: 0;
            bottom: 1rem;
            p {
                background-color: #1a1a1a;
                color: #fefefe;
                font-size: 0.28rem;
                padding: 0.22rem;
                display: inline-block;
                vertical-align: top;
                margin-top: 0.15rem;
                position: relative;
                margin-right: 0.35rem;
                transform-origin: 100%;
                transform: rotateY(90deg);
                transition: transform 0.3s
            }
            p:after {
                content: ' ';
                display: block;
                position: absolute;
                width: 0.2rem;
                height: 0.2rem;
                background-color: #1a1a1a;
                transform: rotate(45deg);
                right: -0.1rem;
                top: 0.3rem;
            }
            .touch {
                transform: rotateY(0deg)
            }
        }
        .down {
            height: 1.14rem;
            width: 1.14rem;
            background-color: #FD9D40;
            border-radius: 50%;
            text-align: center;
            display: inline-block;
            img {
                width: 0.6rem;
                margin-top: 0.2rem;
            }
        }
        .fileWrap {
            font-size: 0.32rem;
            padding: 0.3rem;
            color: #3E3A39;
            /*width: 80%;*/
          .file{
            width: 100%;
          }
        }
    }
}
</style>
<template>
    <div class="resultsInfo">
        <div class="resultsInfoWrap">
            <section class="word clear">
                <div class="title">
                    <img :src="icon" alt="">
                    <span>{{title}}</span>
                </div>
                <div class="time-box">
                    <span class="icon-eye eye" style="font-size: 1rem;color: #999999"></span>
                    <img class="time-img" :src="icon">
                    <span class="time">发布时间：{{$bw.format(time,'date')}}</span>
                    <span class="num"><span>阅读量：</span><span>{{viewed}}</span></span>
                </div>
            </section>
            <section class="fileWrap">
                <iframe class="file" :src="pdfAddress" style="height: 500px;">
                </iframe>
            </section>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isTouch: false,
            resultInfo: {},
            pdfAddress: '',
            title: '',
            icon: '',
            time: '',
            viewed: '0'
        }
    },
    components: {

    },
    props: ['rootInfo'],
    methods: {
        downFile(url) {
            window.open(url)
        },
        downtouchstart() {
            this.isTouch = true;
        },
        downtouchend() {
            this.isTouch = false;
        },
        getResultInfo() {

            var id = this.$route.query.attachmentId
            this.$service('/api/WeChat/GetMaterialDetail?attachmentId=' + id, 'get', {}).then((response) => {


                this.pdfAddress = response.Data.PDFUrl ? response.Data.PDFUrl : response.Data.Url
                if (this.pdfAddress.indexOf('http:') < 0) {
                    this.pdfAddress = 'http://' + this.pdfAddress
                }
                if(response.Data.Url.indexOf(".mp3")>-1||response.Data.Url.indexOf(".mp4")>-1||response.Data.Url.indexOf(".png")>-1||response.Data.Url.indexOf(".jpg")>-1||response.Data.Url.indexOf(".bmp")>-1){
                  this.pdfAddress=response.Data.Url;
                }
                this.title = response.Data.Name
                this.icon = response.Data.Icons
                this.time = response.Data.PublishTime
                this.viewed = response.Data.Viewed
                this.viewed=Number(response.Data.Viewed)+1;
                //this.resultInfo = response.Data
                //        处理为pdf
                //        if(this.resultInfo.tags.includes('doc')||this.resultInfo.tags.includes('xls')||this.resultInfo.tags.includes('ppt')||this.resultInfo.tags.includes('txt')){
                //          this.resultInfo.showImageUrl = this.resultInfo.showImageUrl.substring(0,this.resultInfo.showImageUrl.lastIndexOf('.'))+'.pdf'
                //        }
            })
                .catch(err => {
                    //          this.fullscreenLoading=false;
                })
        },
    },
    mounted() {
        // document.getElementById('down').addEventListener('touchstart', this.downtouchstart);
        // document.getElementById('down').addEventListener('touchend', this.downtouchend);
        this.getResultInfo();
    },
}

</script>
